<template>
  <div id="manage">
    <!-- 左侧菜单 -->
    <div class="list-tree-area">
      <vue2-org-tree :data="dataTree" :horizontal="horizontal" :collapsable="collapsable" class="orgTree" :label-class-name="labelClassName" :renderContent="renderContent" @on-expand="onExpand" @on-node-click="onNodeClick" @on-node-mouseover="onMouseover" @on-node-mouseout="onMouseout" />
    </div>
    <!-- 提交表格 组织架构部分-->
    <el-dialog class="dialogForm" :title="title" v-if="dialogVisible" :visible.sync="dialogVisible" :before-close="handleClose" width="800px" top="10vh" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="line"></div>
      <el-form :ref="ref" :model="formParam" :rules="formParamRules" label-width="128px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="机构代码" prop="code">
              <el-input size="small" v-model="formParam.code" name="code" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="机构名称" prop="name">
              <el-input size="small" v-model="formParam.name" name="name" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="负责人" prop="manager">
              <el-input size="small" v-model="formParam.manager" name="manager" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="电话" prop="phone">
              <el-input size="small" v-model="formParam.phone" name="phone" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="邮件" prop="email">
              <el-input size="small" v-model="formParam.email" name="email" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="地址" prop="address">
              <el-input size="small" v-model="formParam.address" name="address" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="机构说明" prop="description">
              <el-input size="small" type="textarea" :rows="3" v-model="formParam.description" name="description" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="排序" prop="sortNum">
              <el-input size="small" v-model="formParam.sortNum" type="number" name="sortNum" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="备注" prop="remark">
              <el-input size="small" v-model="formParam.remark" name="remark" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div>
        <el-button size="small" type="primary" v-show="!isDisabled" @click="addOrEditSubmit()">确定</el-button>
        <el-button size="small" v-show="!isDisabled" @click="userCenle('form')">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "sysOrganize",
    data() {
      var that = this;
      // 获取按钮权限
      let power = {
        query: this.$util.btnShow("sysOrganize.query"), //查询
        add: this.$util.btnShow("sysOrganize.add"), //新增
        update: this.$util.btnShow("sysOrganize.update"), //修改
        delete: this.$util.btnShow("sysOrganize.delete"), //删除
      }
      return {
        power: power, // 按钮显隐控制权限
        ref: "form",
        dialogVisible: false, //控制组织表单显隐
        isDisabled: false, // 表单是否可读标识
        title: "组织架构", //表单名称
        // 新增编辑弹出表单
        formParam: {
          id: "", // 主键
          parentId: "", // 父级
          layers: "", // 层次：#编码#|#编码#
          code: "", // 编号
          name: "", // 名称
          address: "", // 地址
          description: "", // 部门说明
          manager: "", // 负责人
          email: "", // 邮件
          phone: "", // 电话
          sortNum: "", // 排序码
          remark: "", // 备注
        },
        formParamDefault: {
          id: "", // 主键
          parentId: "", // 父级
          layers: "", // 层次：#编码#|#编码#
          code: "", // 编号
          name: "", // 名称
          address: "", // 地址
          description: "", // 部门说明
          manager: "", // 负责人
          email: "", // 邮件
          phone: "", // 电话
          sortNum: "", // 排序码
          remark: "", // 备注
        },
        //   表单验证
        formParamRules: {
          name: [{ required: true, message: "机构名称未填写", trigger: "blur" }],
          code: [{ required: true, message: "机构代码未填写", trigger: "blur" }],
          sortNum: [{ required: true, message: "排序码未填写", trigger: "blur" }]
        },
        // 组织结构部分
        dataTree: {},
        horizontal: false, //水平还是垂直
        collapsable: true, //组件是否可折叠
        expandAll: true,
        labelClassName: "bgWhite", //组织架构自定义class
        // 表格数据
        curParentId: "", //当前选中的父节点id
        curParentName: "", //当前选中的父节点名称
        // 左侧人员部分
        parentId: "", //父组件id
        // 移入的样式
        mouseoverStyle: { color: "#fff", background: "#409EFF", },
        // 是否显示移入样式
        mouseoverShow: 10
      };
    },
    created() {
      //   展开
      // this.toggleExpand(this.dataTree, this.expandAll);
    },
    mounted() {
      let that = this;
      // 初始化数据请求-左侧树列表
      this.init();
    },
    methods: {
      //   全部展开
      toggleExpand(dataTree, val) {
        var that = this;
        if (Array.isArray(dataTree)) {
          dataTree.forEach(function(item) {
            that.$set(item, "expand", val);
            if (item.children) {
              that.toggleExpand(item.children, val);
            }
          });
        } else {
          this.$set(dataTree, "expand", val);
          if (dataTree.children) {
            that.toggleExpand(dataTree.children, val);
          }
        }
      },
      // 收起
      collapse(list) {
        var that = this;
        list.forEach(function(child) {
          if (child.expand) {
            child.expand = false;
          }
          child.children && that.collapse(child.children);
        });
      },
      // 展开和折叠
      onExpand(data) {
        if ("expand" in data) {
          data.expand = !data.expand;
          if (!data.expand && data.children) {
            this.collapse(data.children);
          }
        } else {
          this.$set(data, "expand", true);
        }
      },
      // 点击当前节点
      onNodeClick(e, data) {
        this.mouseoverShow = 10;
        this.curParentId = data.id;
        this.curParentName = data.text;
      },
      // 移出
      onMouseout(e, data) {
        this.mouseoverShow = 10;
      },
      // 移入
      onMouseover(e, data) {
        // this.mouseoverShow = "";
      },
      // 节点内相关按钮
      renderContent(h, data) {
        let that = this;
        return h("el-dropdown", { props: { trigger: "click" } }, [
          h("span", {
            class: "el-dropdown-link",
            style: "cursor: pointer;",
            on: { click: () => { this.showFlag = data.children ? true : false; }, }
          }, data.name),
          h("el-dropdown-menu", { slot: "dropdown" }, [
            h("el-dropdown-item", {
              style: that.mouseoverShow == 0 ? that.mouseoverStyle : "",
              nativeOn: {
                click: () => {
                  that.isDisabled = true;
                  that.seeForm(data);
                },
                mouseover: () => { that.mouseoverShow = 0; },
              },
              directives: [{ name: "show", value: that.power.query }],
            }, "查看"),
            h("el-dropdown-item", {
              style: that.mouseoverShow == 1 ? that.mouseoverStyle : "",
              nativeOn: {
                click: () => {
                  that.isDisabled = false;
                  that.addOrEditLoad((that.sendType = that.$operType.add), data);
                },
                mouseover: () => { that.mouseoverShow = 1; },
              },
              directives: [{ name: "show", value: that.power.add, }],
            }, "新增"),
            h("el-dropdown-item", {
              style: that.mouseoverShow == 2 ? that.mouseoverStyle : "",
              nativeOn: {
                click: () => {
                  that.isDisabled = false;
                  that.addOrEditLoad((that.sendType = that.$operType.update), data);
                },
                mouseover: () => { that.mouseoverShow = 2; },
              },
              directives: [{ name: "show", value: data.id != 0 && that.power.update, }],
            }, "修改"),
            h("el-dropdown-item", {
              style: that.mouseoverShow == 3 ? that.mouseoverStyle : "",
              nativeOn: {
                click: () => { that.handleDelete(data); },
                mouseover: () => { that.mouseoverShow = 3; },
              },
              directives: [{
                name: "show",
                value: data.id != 0 && (!data.children || data.children.length == 0) && that.power.delete,
              }],
            }, "删除"),
          ]),
        ]);
      },
      //初始化
      init() {
        let that = this;
        // 获取组织结构树列表
        this.$req.get({}, api.urlSysOrganizeTreeList, function(_r) {
          if (_r.data.length != 0) {
            that.dataTree = _r.data[0];
            that.toggleExpand(that.dataTree, that.expandAll);
            that.curParentId = that.dataTree.id;
            that.curParentName = that.dataTree.name;
          }
        });
      },
      // 查看
      seeForm(row) {
        let that = this;
        this.dialogVisible = true;
        this.formParam = that.$util.clone_str(row);
        this.title = "组织架构查看";
      },
      //  添加或者编辑表单加载
      addOrEditLoad(operType, row) {
        let that = this;
        this.dialogVisible = true;
        this.$nextTick(function() {
          that.$refs[that.ref].resetFields();
        });
        this.sendType = operType.key;
        if (operType.key == this.$operType.add.key) {
          this.$util.formReset(this.formParam);
          this.formParam.parentId = row.id;
          this.title = "组织架构新增";
        } else {
          this.title = "组织架构编辑";
          this.formParam = that.$util.clone_str(row);
        }
      },
      //  表单提交前的逻辑判断及赋值，根据 sendType 来判断是新增还是编辑  1 表示新增 2 表示编辑
      addOrEditSubmit() {
        var that = this;
        var param = {};
        var url = "";

        //   新增
        if (this.sendType == this.$operType.add.key) {
          url = api.urlSysOrganizeAdd;
          param = this.$util.formData(this.formParam, this.formParamDefault, "id");
        } else { // 修改
          url = api.urlSysOrganizeUpdate;
          param = this.$util.formData(this.formParam, this.formParamDefault);
        }

        this.$req.postForm(that.$refs[this.ref], param, url, function(_r) {
          that.$util.notify.success("操作成功！");
          that.dialogVisible = false;
          that.init();
        });
      },
      //   删除
      handleDelete(row) {
        let that = this;
        this.$util.msgbox.confrim("是否删除此节点, 是否继续?", function() {
          let param = new FormData();
          param.append("id", row.id);
          that.$req.post(param, api.urlSysOrganizeDelete, function(_r) {
            that.$util.notify.success("删除成功");
            that.init();
          });
        }).catch(() => {
          that.$util.notify.info("已取消删除");
        });
      },
    },
    // 取消
    userCenle(ref) {
      this.$refs[this.ref].resetFields(); //重置上次校验提示
      this.dialogVisible = false;
    },
    //  关闭弹出框
    handleClose(done) {
      done();
    },
  };
</script>
<style scoped lang="scss">
  #manage {
    @include routerView;
    height: 100%;
    overflow: hidden;
  }

  // 左侧菜单样式
  .list-tree-area {
    width: 100%;
    padding: 0 1% 1% 1%;
    background-color: #fff;
    // border-right: #354457 1px dashed;
    //   float: left;
    height: 100%;
    overflow-y: scroll;
    position: relative;

    .orgTree {
      font-size: 16px;
      margin: auto;
    }
  }
</style>
<style lang="scss">
  // 组织架构部分
  .bgWhite {
    margin: auto;

    a {
      font-family: SourceHanSans;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
</style>